<template>
  <div class="app-container search-list model-with-line"  v-loading="loading">
    <div style="margin:30px 0 0px 30px">PayPal收款:
    </div>
    <div class="container">
      <el-row>
        <el-col :span="4">PayPal</el-col>
        <el-col :span="16">
          <span style="">通过绑定PayPal个人账号或者PayPal商户账号接受PayPal付款。</span>
        </el-col>
        <el-col :span="4">
          <el-button size="mini" type="primary" @click="setPayPal = true">设置</el-button>
        </el-col>
      </el-row>
    </div>

    <div class=" model-with-line">
      <div style="margin:30px 0 0px 30px">信用卡支付:
      </div>
      <div class="container">
        <el-row>
          <el-col :span="4">
            <span v-if="config.creditCard">{{ config.creditCard.creditCardChannel }}</span>信用卡
          </el-col>
          <el-col :span="16">
            <span style="">通过填写信用卡相关信息，激活信用卡收款，接受不同类型信用卡付款。</span>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="setCreditCard = true">设置</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="app-container search-list model-with-line">
      <div style="margin:30px 0 0px 30px">本地支付:
      </div>
      <div class="container">
        <el-row>
          <el-col :span="4">
            本地支付
          </el-col>
          <el-col :span="16">
            <span style="">一站接入全球主流本地支付。</span>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="primary" @click="setLocalPay = true">设置</el-button>
          </el-col>
        </el-row>
      </div>
    </div>

    <el-dialog :visible.sync="setPayPal" title="绑定PayPal账号(请务必保证三个都填写)" :before-close="cancelBtn">
      <el-form ref="paypalAccountForm" :model="config"
               :rules="checkRules" label-width="200px">
        <el-form-item label="Merchant ID" prop="payPal.appId">
          <el-input v-model.trim="config.payPal.appId" clearable/>
        </el-form-item>
        <el-form-item label="Client ID" prop="payPal.paypalClientId">
          <el-input v-model.trim="config.payPal.paypalClientId" clearable/>
        </el-form-item>
        <el-form-item label="Secret" prop="payPal.paypalSecret">
          <el-input v-model.trim="config.payPal.paypalSecret" clearable/>
        </el-form-item>
        <el-form-item label="BN Code" prop="payPal.paypalSecret">
          <el-input v-model.trim="config.payPal.paypalBNCode" clearable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="submitLoading" type="primary" @click="saveBtn(config.payPal)">保存</el-button>
        <el-button @click="cancelBtn">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="setCreditCard" title="设置信用卡收款" :before-close="cancelBtn">
      <el-form ref="paypalAccountForm" :model="config" label-width="200px" :rules="checkRules">
        <el-form-item label="信用卡收款渠道">
          <el-select v-model="config.creditCard.creditCardChannel" placeholder="请选择" style="width: 255px"
                     @change="changeOption(config.creditCard.creditCardChannel)">
            <el-option
                v-for="item in creditCardChannel"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="(config.creditCard.creditCardChannel === 'PingPong' || config.creditCard.creditCardChannel === 'Airwallex') ? 'clientId' : config.creditCard.creditCardChannel === 'Payoneer' ? 'API用户名' : '商户号(Merchant ID)'" prop="creditCard.appId">
          <el-input v-model.trim="config.creditCard.appId" clearable/>
        </el-form-item>
        <el-form-item :label="config.creditCard.creditCardChannel === 'Airwallex' ? 'Key' : config.creditCard.creditCardChannel === 'Payoneer' ? 'API令牌' : 'Key/secret'" prop="creditCard.secret">
          <el-input v-model.trim="config.creditCard.secret" clearable/>
        </el-form-item>
        <el-form-item v-if="config.creditCard.creditCardChannel === 'AsiaBill' || config.creditCard.creditCardChannel === 'PingPong' ||  config.creditCard.creditCardChannel === 'Payoneer' ||  config.creditCard.creditCardChannel === 'Airwallex'" :label="config.creditCard.creditCardChannel === 'AsiaBill' ? '网关号' : config.creditCard.creditCardChannel === 'Payoneer' ? '店铺代码' : config.creditCard.creditCardChannel === 'Airwallex' ? 'Secret' : 'accId'" prop="creditCard.item1">
          <el-input v-model.trim="config.creditCard.item1" clearable/>
        </el-form-item>
<!--        <el-form-item v-if="config.creditCard.creditCardChannel === 'AsiaBill'" label='支付方式'>-->
<!--          <el-select v-model="config.creditCard.item2">-->
<!--            <el-option label="站内支付" value="1"></el-option>-->
<!--            <el-option label="本地支付" value="2"></el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="submitLoading" type="primary" @click="saveBtn(config.creditCard)">保存</el-button>
        <el-button @click="cancelBtn">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="setLocalPay" title="本地支付" :before-close="cancelBtn">
      <el-form ref="paypalAccountForm" :model="config" label-width="200px" :rules="checkRules">
        <el-form-item label="商户号(Merchant ID)" prop="creditCard.appId">
          <el-input v-model.trim="config.localPay.appId" clearable/>
        </el-form-item>
        <el-form-item label="Key/secret" prop="localPay.secret">
          <el-input v-model.trim="config.localPay.secret" clearable/>
        </el-form-item>
        <el-form-item  label="网关号" prop="localPay.item1">
          <el-input v-model.trim="config.localPay.item1" clearable/>
        </el-form-item>
        <!--        <el-form-item v-if="config.creditCard.creditCardChannel === 'AsiaBill'" label='支付方式'>-->
        <!--          <el-select v-model="config.creditCard.item2">-->
        <!--            <el-option label="站内支付" value="1"></el-option>-->
        <!--            <el-option label="本地支付" value="2"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="submitLoading" type="primary" @click="saveBtn(config.localPay)">保存</el-button>
        <el-button @click="cancelBtn">取消</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import {getConfigBySite, editSiteConfig} from '@/api/site-config';
import axios from 'axios';
import {mapGetters} from 'vuex';

export default {
    name: 'collection-channels',
    data () {
        return {
            loading: false,
            creditCardChannel:
                [
                    {value: 'AsiaBill', label: 'AsiaBill'},
                    {value: 'PacyPay', label: 'PacyPay'},
                    {value: 'PingPong', label: 'PingPong'},
                    {value: 'Airwallex', label: 'Airwallex'},
                    {value: 'Payoneer', label: 'Payoneer'}
                ],
            params: {},
            config: {
                siteId: '',
                payPal: {
                    appId: '',
                    paymentMethod: 'PayPal',
                    creditCardChannel: 'PayPal',
                    paypalClientId: '',
                    paypalSecret: '',
                    secret: '',
                    item1: '',
                    item2: '',
                    enable: '',
                    paypalBNCode: ''

                },
                creditCard: {
                    appId: '',
                    paymentMethod: 'credit_card',
                    creditCardChannel: '',
                    secret: '',
                    item1: '',
                    item2: '1',
                    enable: ''
                },
                localPay: {
                    paymentMethod: 'Klarna',
                    creditCardChannel: 'Klarna',
                    appId: '',
                    secret: '',
                    item1: ''
                }
            },
            creditCards: [],
            submitLoading: false,
            setPayPal: false,
            setCreditCard: false,
            setLocalPay: false,
            checkRules: {
                'payPal.appId': [
                    {max: 13, min: 13, message: '请输入13位Merchant ID', trigger: 'blur'}
                ]
                // 'creditCard.appId': [
                //     {required: true, message: '请输入商户号', trigger: 'blur'}
                // ],
                // 'creditCard.secret': [
                //     {required: true, message: '请输入秘钥', trigger: 'blur'}
                // ],
                // 'creditCard.item1': [
                //     {required: true, message: '请输入网关号', trigger: 'blur'}
                // ]
            }
        };
    },
    methods: {
        getDataBySiteId () {
            this.loading = true;
            this.params.siteId = this.siteId;
            getConfigBySite(this.params).then((res) => {
                this.creditCards = res.data.creditCards;
                if (res.data.payPal !== undefined) {
                    this.config.payPal = res.data.payPal;
                }
                if (res.data.creditCard !== undefined) {
                    this.config.creditCard = res.data.creditCard;
                }
                if (res.data.klarna && Object.keys(res.data.klarna).length) {
                    this.config.localPay = Object.assign(this.config.localPay, res.data.klarna);
                }
                this.loading = false;
            });
        },
        saveBtn (data) {
            this.$refs['paypalAccountForm'].validate(valid => {
                if (valid) {
                    this.submitLoading = true;
                    console.log(data);
                    data.siteId = this.siteId;
                    editSiteConfig(data).then(res => {
                        this.$message({type: 'success', message: '保存成功!'});
                        this.submitLoading = false;
                        this.setCreditCard = false;
                        this.setPayPal = false;
                        this.setLocalPay = false;
                        this.$store.dispatch('CLEAR_FRONT_CACHE');
                        this.getDataBySiteId();
                    }).catch(() => {
                        this.submitLoading = false;
                    });
                }
            });
        },
        cancelBtn () {
            this.setCreditCard = false;
            this.setPayPal = false;
            this.setLocalPay = false;
            this.getDataBySiteId();
        },
        changeOption (value) {
            let list = {
                appId: '',
                paymentMethod: 'credit_card',
                creditCardChannel: value,
                secret: '',
                item1: '',
                item2: '',
                enable: ''
            };
            list = Object.assign(list, this.creditCards.find(s => s.creditCardChannel === this.config.creditCard.creditCardChannel) || {});
            if (Object.keys(list).length) {
                this.config.creditCard = list;
            }
        }
    },
    created () {
        this.$nextTick(() => {
            this.getDataBySiteId();
        });
    },
    computed: {
        ...mapGetters(['siteList']),
        siteInfo () {
            let info = this.siteList.find(res => res.id === Number(this.siteId));
            return info;
        },
        siteId () {
            return this.$store.state.user.siteId;
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
  height: 150px;
  margin: 20px;
  display: flex;
  flex-direction: row;
  padding: 40px;
  align-items: center;
  background-color: #f8f7f7;
}

.el-row {
  width: 100%
}
</style>
